<template>
	<view id="member-invite">
		<header-back :headerTitle="$lang('invite.title')"></header-back>
		<view class="header">
			<image src="/static/icon/invite_icon_01.png" class="h-icon" mode=""></image>
		</view>
		<image src="/static/icon/invite_icon_sm_01.png" class="fixed-01" mode=""></image>
		<image src="/static/icon/invite_icon_sm_02.png" class="fixed-02" mode=""></image>
		<image src="/static/icon/invite_icon_sm_03.png" class="fixed-03" mode=""></image>
		<image src="/static/icon/invite_icon_sm_01.png" class="fixed-04" mode=""></image>
		
		<view class="content">
			<view class="invite-row">
				<view class="row-head">
					<view class="h8">{{$lang('invite.myInvitationCode')}}</view>
					<view class="h3">{{memberInfo.member_id}}</view>
					<view class="row-link">
						<view class="link">{{link}}</view>
						<image src="/static/icon/invite_icon_copy.png" @click="copyEvent()" class="copy-icon" mode=""></image>
					</view>					
				</view>
				
				<view class="row-ul">
					<view class="row-li">
						<view class="row-h">01</view>
						<image src="/static/icon/invite_icon_radio.png" class="li-icon" mode=""></image>
						<view class="row-h">02</view>
						<image src="/static/icon/invite_icon_radio.png" class="li-icon" mode=""></image>
						<view class="row-h">03</view>
					</view>
					<view class="row-li row-text">
						<view class="li-text">{{$lang('invite.shareWithYourFriends')}}</view>
						<view class="li-text">{{$lang('invite.advert')}}</view>
						<view class="li-text">{{$lang('invite.earnRewards')}}</view>
					</view>
				</view>
				
				<view class="row-f">
					<view class="row-btn" @click="$refs.invitePopup.open()">{{$lang('invite.qrCodeInvitation')}}</view>
				</view>
				
			</view>		
			
			<view class="invite-title">
				<image src="/static/icon/invite_icon_list_01.png" class="t-icon" mode=""></image>
				<view class="title">{{$lang('invite.invitationRecord')}}</view>
				<image src="/static/icon/invite_icon_list_02.png" class="t-icon" mode=""></image>
			</view>	
			
			<view class="content-invite">
				<view class="invite-box">
					<view class="invite-head">
						<view class="head">
							<view class="num">{{inviteObj.team_count || 0 }}人</view>
							<view class="tip">{{$lang('invite.cumulativeInvitation')}}</view>
						</view>
						<view class="head">
							<view class="num">{{ inviteObj.invite_white_credit || 0}}</view>
							<view class="tip">{{$lang('invite.getWhitePoints')}}</view>
						</view>
						<view class="head">
							<view class="num">{{inviteObj.team_count_today || 0}}</view>
							<view class="tip">{{$lang('invite.inviteToday')}}</view>
						</view>
					</view>
					<view class="invite-ul" >
						<view class="invite-li li-head">
							<view class="li-name li-l">{{$lang('invite.registrationTime')}}</view>
							<view class="li-name ">{{$lang('invite.inviteFriends')}}(UID)</view>
							<view class="li-name li-r">{{$lang('invite.reward')}}(RP)</view>
						</view>
						<view class="" v-if="inviteAry.length > 0">
							<view class="invite-li" v-for="(item,index) in inviteAry" :key="index">
								<view class="li-name li-l">{{item.audit_time}}</view>
								<view class="li-name ">{{item.member_id}}</view>
								<view class="li-name li-r">{{item.commission1_white_credit || 0}}</view>
							</view>
						</view>
						<view v-else class="no-ul">
							-- {{$lang('common.noMoreData')}} --
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 邀请码弹框 @touchmove.prevent.stop-->
		<uni-popup   ref="invitePopup" type="center"  :maskClick="true">
			<view class="invite-popup">
				<view class="popup-imgs">
					<image class="code-icon" :src="qrCode" mode=""></image>
					<view class="h6">{{$lang('common.saveAlbum')}}</view>
				</view>
			<image @click.stop="$refs.invitePopup.close()" src="/static/icon/close_invite_01.png" class="code-close" mode=""></image>
			</view>
		</uni-popup>			
		
		
		<canvas v-show='!qrCode' canvas-id="qrcode"  class="qrcode-img" />
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uQRCode from '@/utils/uqrcode.js'
export default {
	data() {
		return {
			inviteAry: [],
			memberInfo: {},
			link: '',
			qrCode: '',
			page: 1,
			totalPgae: 1,
			inviteObj: {},
		};
	},
	onLoad() {
		this.getMemberInfo();
		this.getList();
	},
	components: {
		uniPopup,
		headerBack
	},
	onShow() {

	},
	methods: {
		getList(){
			this.$api.sendRequest({
				url: '/api/member/team',
				data: {
					page: this.page,
					page_size: 12
				},
				method: 'get',
				success: res=>{
					if(res.code == 0){
						this.inviteObj = res.data;
						this.totalPgae = res.data.page_count;
						if(this.page == 1){
							this.inviteAry = res.data.list
						}else {
							this.inviteAry.push(...res.data.list);
						}
					}
				}
			})
		},
		// 复制
		copyEvent() {
			this.$util.copy(this.link)
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.memberInfo = res.data;
				this.link = `http://m-test.chainlife1688.com/h5/pages/login/register/register?uid=${this.memberInfo.member_id}`
				this.makeQRCode(this.link)
			} 
		},
		makeQRCode(qrcode) {
			uQRCode.make({
				canvasId: 'qrcode',
				componentInstance: this,
				text: qrcode,
				size: 185,
				margin: 10,
				backgroundColor: '#ffffff',
				foregroundColor: '#000000',
				fileType: 'jpg',
				correctLevel: uQRCode.defaults.correctLevel,
				success: res => {
					this.qrCode = res
					// console.log(this.qrCode)
				}
			})
		},
	},
	onReachBottom() {
		if (this.page > this.totalPage || this.page == this.totalPgae) return;
		this.page++
		this.getList()
	}
};
</script>

<style>
	page {
		font-family: 'PingFangSC-Regular, PingFang SC';
		height: 100%;
		background-image: url(../../static/icon/proxy_bg_img.png);
		background-repeat:no-repeat center;
		background-size:100% 100%;
		background-attachment:fixed;
		/* background-color: rgba($color: #fff, $alpha: 0.12); */
		-moz-background-size:100% 100%;
	}
</style>

<style scoped lang="scss">
	.fixed-01 {
		position: absolute;
		top: 0px;
		left: 44rpx;
		width: 72rpx;
		height: 92rpx;
	}
	.fixed-02 {
		position: absolute;
		top: 10px;
		right: 0rpx;
		width: 194rpx;
		height: 172rpx;
	}
	.fixed-03 {
		position: absolute;
		top: 190px;
		right: 12rpx;
		width: 102rpx;
		height: 104rpx;
	}
	.fixed-04 {
		position: absolute;
		top: 190rpx;
		left: 0px;
		width: 126rpx;
		height: 160rpx;
	}
	.header {
		padding: 50rpx 0px;
		.h-icon {
			width: 506rpx;
			height: 72rpx;
			margin: 0px auto;
			display: block;
		}
	}
	
	.content {
		width: 100%;
		padding: 0px 12rpx 50rpx;
		box-sizing: border-box;
		.invite-row {
			width: 100%;
			height: 768rpx;
			background-image: url(../../static/icon/invite_row_icon.png);
			background-repeat:no-repeat center;
			background-size:100% 100%;
			padding-top: 80rpx;
			box-sizing: border-box;
			.row-head {
				width: 100%;
				padding: 0rpx 100rpx 0px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 90rpx;
				.h8 {
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 34rpx;
					margin-bottom: 12rpx;
				}
				.h3 {
					font-size: 48rpx;
					font-weight: 600;
					color: #3A3A3A;
					line-height: 66rpx;
					margin-bottom: 24rpx;
				}
				
				.row-link {
					width: 100%;
					display: flex;
					align-items: center;
					height: 56rpx;
					background: rgba(0, 0, 0, 0.05);
					border-radius: 28rpx;
					padding: 0px 20rpx;
					box-sizing: border-box;
					.link {
						width: calc(100% - 60rpx);
						font-size: 28rpx;
						color: #323130;
						@include nowrap;
					}
					.copy-icon {
						width: 30rpx;
						height: 28rpx;
						display: block;
						margin-left: 30rpx;
					}
				}
				
			}
			
			
			.row-ul {
				width: 100%;
				padding: 0rpx 90rpx 0px;
				box-sizing: border-box;
				margin-bottom: 44rpx;
				.row-li {
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-bottom: 26rpx;
					.row-h {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.15);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 34rpx;
						font-weight: 600;
						color: #FFFFFF;
					}
					
					.li-icon {
						width: 34rpx;
						height: 6rpx;
					}
					.li-text {
						max-width: 204rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						text-align: center;
					}
					
				}
				.row-text {
					align-items: flex-start;
					justify-content: space-between;
					margin-bottom: 0px;
				}
				
			}
			
			.row-f {
				width: 100%;
				padding: 0rpx 80rpx 0px;
				box-sizing: border-box;
				.row-btn {
					width: 100%;
					height: 100rpx;
					background: linear-gradient(180deg, #FFE49A 0%, #FFAF51 100%);
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					font-weight: 600;
					color: #3A3A3A;
				}
			}
			
		}
		
		.invite-title {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0px 28rpx;
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
				margin: 0px 18rpx;
			}
			
			.t-icon {
				width: 28rpx;
				height: 30rpx;
			}
			
		}
		
		.content-invite {
			width: 100%;
			padding: 0px 20rpx;
			box-sizing: border-box;
		}
		
		.invite-box {
			width: 100%;
			background: #FFF4DC;
			border-radius: 26rpx;
			padding: 30rpx 0px;
			max-height: 644rpx;
			overflow: auto;
			.invite-head {
				width: 100%;
				padding: 0px 48rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 26rpx;
				.head {
					text-align: center;
					.num {
						font-size: 32rpx;
						font-weight: 600;
						color: #282828;
						line-height: 44rpx;
						margin-bottom: 10rpx;
					}
					.tip {
						font-size: 24rpx;
						font-weight: 600;
						color: #92969E;
						line-height: 34rpx;
					}
				}
			}
			
			.invite-ul {
				.invite-li {
					width: 100%;
					// display: grid;
					// grid-template-columns: 1fr 1fr 1fr;
					// align-items: center;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0px 24rpx;
					box-sizing: border-box;
					margin-bottom: 26rpx;
					text-align: center;
					.li-name {
						width: 33%;
						font-size: 24rpx;
						font-weight: 600;
						color: #282828;
						line-height: 34rpx;
					}
					.li-l {
						text-align: left;
					}
					.li-r {
						text-align: right;
					}
				}
				.li-head {
					height: 66rpx;
					background: #F0E4CA;
					margin-bottom: 20rpx;
					.li-name {
						color: #92969E;
					}
				}
			}
			
		}
		
	}
	
	
	.qrcode-img {
		width: 400rpx;
		height: 400rpx;
		position: fixed;
		top: -20000rpx;
		left: 0px;
	}
	
	
	.invite-popup {
		position: relative;
		.popup-imgs {
			padding-top: 78rpx;
			box-sizing: border-box;
			width: 600rpx;
			background: #fff;
			border-radius: 10rpx;
			height: 652rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.code-icon {
				width: 436rpx;
				height: 436rpx;
				display: block;
				margin-bottom: 44rpx;
			}
			.h6 {
				font-size: 26rpx;
				color: #B3B3B3;
			}
		}
		.code-close {
			position: fixed;
			width: 80rpx;
			height: 80rpx;
			bottom: 220rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9999;
		}
	}
	
	
</style>
